<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
<!--        <div class="col-sm-6">-->
<!--            <div class="ibox float-e-margins">-->
<!--                <div class="ibox-title">-->
<!--                    <h5>折线图</h5>-->
<!--                    <div class="ibox-tools">-->
<!--                        <a class="collapse-link">-->
<!--                            <i class="fa fa-chevron-up"></i>-->
<!--                        </a>-->
<!--                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">-->
<!--                            <i class="fa fa-wrench"></i>-->
<!--                        </a>-->
<!--                        <ul class="dropdown-menu dropdown-user">-->
<!--                            <li><a href="javascript:;">选项1</a>-->
<!--                            </li>-->
<!--                            <li><a href="javascript:;">选项2</a>-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                        <a class="close-link">-->
<!--                            <i class="fa fa-times"></i>-->
<!--                        </a>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="ibox-content">-->
<!--                    <div class="echarts" id="echarts-line-chart"></div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>房产资产面积占比</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="javascript:;">选项1</a>
                            </li>
                            <li><a href="javascript:;">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-pie-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>房产租赁情况</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="javascript:;">选项1</a>
                            </li>
                            <li><a href="javascript:;">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    $(function () {

        $.get(ctx+"system/house/analysis/getAcrge",function(res){
            echarts_1(res.data);
        });

        $.get(ctx+"system/house/analysis/getLeaseAcrge",function(res){
            echarts_2(res.data);
        });

        $.get(ctx+"system/house/analysis/getLeaseMoney",function(res){
            echarts_3(res.data);
        });
    });

    function echarts_1(datas) {
        var names = new Array();
        var values = new Array();
        for(var i in datas){
            var data = datas[i];
            names.push(data.deptName);
            var value = {'value':data.total, name: data.deptName};
            values.push(value);
        }
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts-pie-chart'));
        option = {
            tooltip : {
                trigger: 'item',
                formatter: "{b}: {c}㎡({d}%)"
            },
            legend: {
                left:0,
                bottom:0,
                height:160,
                itemWidth:10,
                itemHeight:10,
                itemGap:10,
                textStyle:{
                    color: '#333',
                    fontSize:12
                },
                orient:'vertical',
                data:names
            },
            calculable : true,
            series : [
                {
                    name:' ',
                    color: ['#339ae5', '#f38051', '#e556e6', '#e7536b', '#d9c701', '#34e2e1', '#c9c862', '#c98b62', '#c962b9', '#7562c9','#c96262','#c25775','#00b7be'],
                    type:'pie',
                    radius : [30, 70],
                    center : ['50%', '40%'],
                    roseType : 'radius',
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },

                    lableLine: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },

                    data: values
                },
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }

    function echarts_2(datas) {
        var names = new Array();
        var totalvalue = new Array();
        var leasevalues = new Array();
        for(var i in datas){
            var data = datas[i];
            names.push(data.deptName);
            var value = {'value':data.total, name: data.deptName};
            var values = {'value':data.rentalArea, name: data.deptName};
            totalvalue.push(value);
            leasevalues.push(values);
        }
        // 基于准备好的dom，初始化echarts实例
        var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
        var baroption = {
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                textStyle:{
                    color: '#333',
                    fontSize:12
                },
                data:['总面积','租赁面积']
            },
            grid:{//x左 x2 右  y上  y2下 距离
                x:60,
                x2:40,
                y2:24
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : names
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'总面积',
                    type:'bar',
                    data: totalvalue
                },
                {
                    name:'租赁面积',
                    type:'bar',
                    data:leasevalues,
                }
            ]
        };
        barChart.setOption(baroption);
        window.onresize = barChart.resize;
    }

</script>
</body>
</html>